<template>
    <div class="brand-box">
        <!--查询表单-->
        <div class="search-box">
            <el-form :inline="true" class="demo-form-inline" style=" text-align: center;">
                <el-form-item label="赠品名称">
                    <el-input placeholder="赠品名称" v-model="searchParams.goodName"></el-input>
                </el-form-item>
                <el-form-item label="赠品型号">
                    <el-input placeholder="赠品型号" v-model="searchParams.goodModel"></el-input>
                </el-form-item>
                <el-form-item label="赠品颜色" prop="colorId">
                    <el-select v-model="searchParams.colorId">
                        <el-option v-for="type in colorList" :key="type.colorId" :label="type.colorName"
                                   :value="type.colorId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="赠品品牌" prop="brandId">
                    <el-select v-model="searchParams.brandId">
                        <el-option v-for="type in brandList" :key="type.brandId" :label="type.brandName"
                                   :value="type.brandId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="赠品类型" prop="typeId">
                    <el-select v-model="searchParams.typeId">
                        <el-option v-for="type in typeList" :key="type.typeId" :label="type.typeName"
                                   :value="type.typeId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="审核状态" prop="goodCheckid">
                    <el-select v-model="searchParams.goodCheckid">
                        <el-option v-for="type in giftCheckList" :key="type.giftCheckid" :label="type.giftCheckname"
                                   :value="type.giftCheckid">
                        </el-option>
                    </el-select>
                </el-form-item>

                <br>
                <el-form-item style=" text-align: center;">
                    <el-button type="success" @click="findPage" icon="el-icon-search">查询</el-button>
                    <el-button type="warning" @click="resetForm" icon="el-icon-refresh-right">重置</el-button>
                    <el-button type="primary" icon="el-icon-plus"
                               @click="dialogVisibleChooseGift=true,formData={},imageUrl=''">
                        新建商品转赠品
                    </el-button>

                </el-form-item>
            </el-form>
        </div>
        <!--操作按钮-->
        <!--        <div class="crud-box">
                    <el-button type="success" icon="el-icon-edit" size="mini">修改</el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
                </div>-->
        <!--table展示数据-->
        <div class="table-box">
            <el-table
                    :data="tableData"
                    style="width: 100%"
                    stripe border
                    @selection-change="checkBoxSelectionChange"
            >
                <el-table-column align="center" label="序号" type="index" width="60">
                    <!--              :index='indexMethod'-->

                </el-table-column>
                <!--                <el-table-column
                                        type="selection"
                                        width="55">
                                </el-table-column>-->
                <el-table-column
                        align="center"
                        prop="goodName"
                        label="赠品名称"
                        width="180">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="typeName"
                        label="赠品类型"
                        width="180">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="brandName"
                        label="赠品品牌"
                        width="150">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="goodMallprice"
                        label="赠品价格"
                        width="180">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="goodNum"
                        label="赠品数量"
                        width="180">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="checkName"
                        label="审核状态"
                        width="180">
                    <template v-slot="obj">
                        <span v-if="obj.row.checkId=== 1" style="color: #606266">{{obj.row.checkName}}</span>
                        <span v-else style="color: firebrick">{{obj.row.checkName}}</span>
                    </template>
                </el-table-column>

                <el-table-column
                        align="center"
                        prop="address"
                        label="操作">

                    <template v-slot="obj">
                        <el-button type="info" icon="el-icon-zoom-in" style="margin-right: 10px"
                                   @click="editForm=obj.row,formDialogVisible=true,getThisGift(obj.row)">查看
                        </el-button>
                        <el-button type="primary" icon="el-icon-edit" style="margin-right: 10px"
                                   @click="editForm=obj.row,editDialogVisible=true,getThisGift(obj.row)">修改
                        </el-button>
                        <el-popconfirm
                                confirm-button-text='确认'
                                cancel-button-text='取消'
                                @confirm="deleteById"
                                icon="el-icon-info"
                                icon-color="red"
                                title="确定删除这一条数据吗？"
                        >

                            <el-button slot="reference" type="danger" icon="el-icon-delete"
                                       @click="formData.goodGiftid=obj.row.goodGiftid">删除
                            </el-button>
                            <el-button slot="reference" type="warning" icon="el-icon-view"
                                       @click="editForm=obj.row,checkDialogVisible=true,getThisGift(obj.row)">审核跟踪
                            </el-button>
                        </el-popconfirm>
                    </template>


                </el-table-column>
            </el-table>
        </div>
        <!--分页-->
        <div class="page-box">
            <el-pagination
                    background
                    :current-page="searchParams.currentPage"
                    :page-size="searchParams.pageSize"
                    layout="prev, pager, next"
                    @current-change="currentPageChange"
                    :total="total">
            </el-pagination>
        </div>

        <!-- 查看弹框-->
        <div class="dialog-box">
            <el-dialog
                    title="查看商品"
                    :visible.sync="formDialogVisible"
                    width="40%"
            >
                <el-form ref="form" :model="editForm" label-width="240px">
                    <el-form-item label="商品名称:" size="small">
                        <el-input :disabled="true" v-model="editForm.goodName" style="width: 240px;"></el-input>
                    </el-form-item>

                    <el-form-item label="商品类型:">
                        <el-select v-model="editForm.goodTypeid" disabled>
                            <el-option v-for="type in typeList" :key="type.typeId" :label="type.typeName"
                                       :value="type.typeId">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="商品型号:">
                        <el-input :disabled="true" v-model="editForm.goodModel" style="width: 240px;"></el-input>
                    </el-form-item>

                    <el-form-item label="商品单价:">
                        <el-input :disabled="true" v-model="editForm.goodMallprice" style="width: 240px;"></el-input>
                    </el-form-item>


                    <el-form-item label="最低库存量:">
                        <el-input :disabled="true" v-model="editForm.minSku" style="width: 240px;"></el-input>
                    </el-form-item>


                    <el-form-item label="商品颜色:">
                        <el-select v-model="editForm.goodColorid" disabled>
                            <el-option v-for="type in colorList" :key="type.colorId" :label="type.colorName"
                                       :value="type.colorId">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="商品品牌:">
                        <el-select v-model="editForm.goodBrandid" disabled>
                            <el-option v-for="type in brandList" :key="type.brandId" :label="type.brandName"
                                       :value="type.brandId">
                            </el-option>
                        </el-select>
                    </el-form-item>

                </el-form>
            </el-dialog>
        </div>

        <!-- 审核跟踪弹框-->
        <div class="dialog-box">
            <el-dialog
                    title="查看商品"
                    :visible.sync="checkDialogVisible"
                    width="40%"
            >
                <el-card class="box-card">
                    <el-form ref="form" :model="editForm" label-width="240px">
                        <el-form-item label="商品名称:" size="small">
                            <el-input :disabled="true" v-model="editForm.goodName" style="width: 240px;"></el-input>
                        </el-form-item>

                        <el-form-item label="商品类型:">
                            <el-select v-model="editForm.goodTypeid" disabled>
                                <el-option v-for="type in typeList" :key="type.typeId" :label="type.typeName"
                                           :value="type.typeId">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="商品型号:">
                            <el-input :disabled="true" v-model="editForm.goodModel" style="width: 240px;"></el-input>
                        </el-form-item>

                        <el-form-item label="商品单价:">
                            <el-input :disabled="true" v-model="editForm.goodMallprice" style="width: 240px;"></el-input>
                        </el-form-item>


                        <el-form-item label="赠品数量:">
                            <el-input :disabled="true" v-model="editForm.goodSum" style="width: 240px;"></el-input>
                        </el-form-item>


                        <el-form-item label="商品颜色:">
                            <el-select v-model="editForm.goodColorid" disabled>
                                <el-option v-for="type in colorList" :key="type.colorId" :label="type.colorName"
                                           :value="type.colorId">
                                </el-option>
                            </el-select>
                        </el-form-item>

                    </el-form>
                </el-card>
                <br>

                    <el-card class="box-card" >
                        <template #header>
                            <div class="card-header">
                                <span>审核信息</span>
                            </div>
                        </template>
                        <el-card class="box-card-in" style="width: 25%">
                            <span class="approve">审核人：&emsp;</span>
                            <span class="approve">admin</span>
                        </el-card>
                        <el-card class="box-card-in" style="width: 44%">
                            <span class="approve">审核日期：&emsp;</span>
                            <template >
                                <span>{{ parseDateFull(editForm.goodChecktime) }}</span>
                            </template>
                        </el-card>
                        <el-card class="box-card-in" style="width: 30%">
                            <span class="approve">审核状态：&emsp;</span>
                            <span>{{editForm.checkName}}</span>
                        </el-card>
                        <el-card style="width: 99.2%">
                            <template #header>
                                <div class="card-header">
                                    <span class="approve">审核意见:</span>
                                </div>
                            </template>
                            <span class="approve">{{editForm.giftCheckcomment}}</span>
                        </el-card>
                    </el-card>
                    <!--                    <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="editForm.giftCheckcomment"></el-input>-->


            </el-dialog>
        </div>

        <!--        修改弹框-->
        <div class="dialog-box">
            <el-dialog
                    title="修改赠品转商品"
                    :visible.sync="editDialogVisible"
                    width="40%"
            >
                <el-form ref="form" :model="editForm" label-width="240px">
                    <el-form-item label="商品名称:" size="small">
                        <el-input :disabled="true" v-model="editForm.goodName" style="width: 240px;"></el-input>
                    </el-form-item>

                    <el-form-item label="商品类型:">
                        <el-select disabled v-model="editForm.goodTypeid">
                            <el-option v-for="type in typeList" :key="type.typeId" :label="type.typeName"
                                       :value="type.typeId">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="商品型号:">
                        <el-input :disabled="true" v-model="editForm.goodModel" style="width: 240px;"></el-input>
                    </el-form-item>

                    <el-form-item label="商品单价:">
                        <el-input :disabled="true" v-model="editForm.goodMallprice" style="width: 240px;"></el-input>
                    </el-form-item>


                    <el-form-item label="商品颜色:">
                        <el-select disabled v-model="editForm.goodColorid">
                            <el-option v-for="type in colorList" :key="type.colorId" :label="type.colorName"
                                       :value="type.colorId">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="赠品数量:">
                        <el-input :disabled="true" v-model="editForm.goodSum" style="width: 240px;"></el-input>
                    </el-form-item>

                    <el-form-item label="商品入库量:">
                        <el-input v-model="editForm.goodNum" style="width: 240px;"></el-input>
                    </el-form-item>


                    <p style="text-align: right">
                        <el-button type="primary" @click="editDialogVisible = false,editGiftGood()">确 定</el-button>
                        <el-button @click="editDialogVisible = false">取 消</el-button>

                    </p>
                </el-form>
            </el-dialog>
        </div>

        <!--新建外层弹框-->
        <div class="dialog-box">

            <el-dialog
                    title="新建商品转赠品"
                    :visible.sync="dialogVisibleChooseGift"
                    width="40%"
            >
                <el-button type="primary" icon="el-icon-plus" @click="innerVisible=true,formData={},goodData()"
                           style="margin-left: 75%">
                    选择商品
                </el-button>
                <!--新建赠品转商品 弹框-->
 
                <!--                内层选择弹框{   -->
                <template>
                    <el-dialog
                            width="80%"
                            title="选择商品"
                            :visible.sync="innerVisible"
                            :append-to-body="true">
                        <div class="search-box">
                            <el-form :inline="true" class="demo-form-inline" style=" text-align: center;">
                                <el-form-item label="商品名称">
                                    <el-input placeholder="赠品名称" v-model="searchParams.goodName"></el-input>
                                </el-form-item>
                                <el-form-item label="商品型号">
                                    <el-input placeholder="赠品型号" v-model="searchParams.goodModel"></el-input>
                                </el-form-item>
                                <el-form-item label="商品颜色" prop="colorId">
                                    <el-select v-model="searchParams.colorId">
                                        <el-option v-for="type in colorList" :key="type.colorId"
                                                   :label="type.colorName"
                                                   :value="type.colorId">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="商品品牌" prop="brandId">
                                    <el-select v-model="searchParams.brandId">
                                        <el-option v-for="type in brandList" :key="type.brandId"
                                                   :label="type.brandName"
                                                   :value="type.brandId">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="商品类型" prop="typeId">
                                    <el-select v-model="searchParams.typeId">
                                        <el-option v-for="type in typeList" :key="type.typeId"
                                                   :label="type.typeName"
                                                   :value="type.typeId">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <br>
                                <el-form-item style=" text-align: center;">
                                    <el-button type="success" @click="findPage" icon="el-icon-search">查询
                                    </el-button>
                                    <el-button type="warning" @click="resetForm" icon="el-icon-refresh-right">
                                        重置
                                    </el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                        <div class="table-box">
                            <el-table
                                    :data="goodTableData"
                                    style="width: 100%"
                                    stripe border
                                    @selection-change="checkBoxSelectionChange"
                            >
                                <el-table-column align="center" label="序号" type="index" width="60">
                                    <!--              :index='indexMethod'-->

                                </el-table-column>
                                <!--                <el-table-column
                                                        type="selection"
                                                        width="55">
                                                </el-table-column>-->
                                <el-table-column
                                        align="center"
                                        prop="goodName"
                                        label="赠品名称"
                                        width="180">
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        prop="typeName"
                                        label="赠品类型"
                                        width="180">
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        prop="brandName"
                                        label="品牌名称"
                                        width="150">
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        prop="goodModel"
                                        label="品牌型号"
                                        width="180">
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        prop="minSku"
                                        label="最低库存量"
                                        width="130">
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        prop="goodMallprice"
                                        label="商品价格"
                                        width="100">
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        prop="colorName"
                                        label="商品颜色"
                                        width="150">
                                </el-table-column>

                                <el-table-column
                                        align="center"
                                        prop="address"
                                        label="操作">

                                    <template v-slot="obj">
                                        <el-button type="primary" icon="el-icon-zoom-in"
                                                   style="margin-right: 10px"
                                                   @click="formData=obj.row,innerVisible=false,chooseThisGift(obj.row)">
                                            选择
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                        <!--分页-->
                        <div class="page-box">
                            <el-pagination
                                    background
                                    :current-page="searchGoodParams.currentPage"
                                    :page-size="searchGoodParams.pageSize"
                                    layout="prev, pager, next"
                                    @current-change="currentGiftPageChange"
                                    :total="total">
                            </el-pagination>
                        </div>

                    </el-dialog>


                </template>
                <!--                }内层选择弹框结束   -->

                <!--                        新建的赠品转商品-->
                <el-form ref="form" :model="formData" label-width="240px">
                    <el-form-item label="商品名称:" size="small">
                        <el-input :disabled="true" v-model="formData.goodName" style="width: 240px;"></el-input>
                    </el-form-item>
                    <el-form-item label="商品类型:">
                        <el-select disabled v-model="formData.goodTypeid">
                            <el-option v-for="type in typeList" :key="type.typeId" :label="type.typeName"
                                       :value="type.typeId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="商品型号:">
                        <el-input :disabled="true" v-model="formData.goodModel" style="width: 240px;"></el-input>
                    </el-form-item>
                    <el-form-item label="商品单价:">
                        <el-input :disabled="true" v-model="formData.goodMallprice" style="width: 240px;"></el-input>
                    </el-form-item>

                    <el-form-item label="商品数量:">
                        <el-input :disabled="true" v-model="formData.goodSum" style="width: 240px;"></el-input>
                    </el-form-item>
                    <el-form-item label="商品入库数:">
                        <el-input v-model.number="formData.goodNum" style="width: 240px;"></el-input>
                    </el-form-item>


                    <p style="text-align: right">
                        <el-button type="primary" @click="dialogVisibleChooseGift = false,addGoodGift()">确 定
                        </el-button>
                        <el-button @click="dialogVisibleChooseGift = false">取 消</el-button>
                    </p>
                </el-form>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import goodToGift from './goodToGift'

    export default goodToGift;
</script>

<style src="./goodToGift.scss" lang="scss">
</style>
